<template>
  <div class="test-api-page">
    <h2>API测试页面</h2>
    
    <el-card shadow="never" style="margin-bottom: 20px;">
      <template #header>
        <span>登录测试</span>
      </template>
      <el-button @click="testLogin" :loading="loginLoading">测试登录</el-button>
      <p v-if="loginResult">登录结果: {{ loginResult }}</p>
    </el-card>
    
    <el-card shadow="never" style="margin-bottom: 20px;">
      <template #header>
        <span>预订统计测试</span>
      </template>
      <el-button @click="testBookingStats" :loading="statsLoading" :disabled="!token">测试预订统计</el-button>
      <div v-if="statsResult">
        <h4>统计结果:</h4>
        <pre>{{ JSON.stringify(statsResult, null, 2) }}</pre>
      </div>
    </el-card>
    
    <el-card shadow="never">
      <template #header>
        <span>调试信息</span>
      </template>
      <div>
        <p>Token: {{ token ? '已获取' : '未获取' }}</p>
        <p>当前时间: {{ new Date().toLocaleString() }}</p>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref } from 'vue'
import request from '@/utils/request'
import { ElMessage } from 'element-plus'

export default {
  name: 'TestApi',
  setup() {
    const loginLoading = ref(false)
    const statsLoading = ref(false)
    const loginResult = ref('')
    const statsResult = ref(null)
    const token = ref('')
    
    const testLogin = async () => {
      loginLoading.value = true
      try {
        const response = await request.post('/v1/admin/login', {
          username: 'testadmin',
          password: '123456'
        })
        
        console.log('登录响应:', response)
        token.value = response.data.token
        localStorage.setItem('admin_token', token.value)
        loginResult.value = '登录成功'
        ElMessage.success('登录成功')
      } catch (error) {
        console.error('登录失败:', error)
        loginResult.value = '登录失败: ' + error.message
        ElMessage.error('登录失败')
      } finally {
        loginLoading.value = false
      }
    }
    
    const testBookingStats = async () => {
      statsLoading.value = true
      try {
        const response = await request.get('/v1/admin/venues/12/booking-statistics?date=2025-06-20')
        
        console.log('统计响应:', response)
        statsResult.value = response.data
        ElMessage.success('获取统计数据成功')
      } catch (error) {
        console.error('获取统计数据失败:', error)
        statsResult.value = { error: error.message }
        ElMessage.error('获取统计数据失败')
      } finally {
        statsLoading.value = false
      }
    }
    
    return {
      loginLoading,
      statsLoading,
      loginResult,
      statsResult,
      token,
      testLogin,
      testBookingStats
    }
  }
}
</script>

<style lang="scss" scoped>
.test-api-page {
  padding: 20px;
  
  pre {
    background: #f5f5f5;
    padding: 10px;
    border-radius: 4px;
    overflow: auto;
    max-height: 400px;
  }
}
</style> 